{% extends 'main.html' %}

{% block content %}

<main class="create-room layout">
    <div class="container">
      <div class="layout__box">

        <div class="layout__boxHeader">

          <div class="layout__boxTitle">

            <a href="{% url 'home' %}">  {# 取消编辑 返回到查看room页面 #}
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                <title>arrow-left</title>
                <path
                  d="M13.723 2.286l-13.723 13.714 13.719 13.714 1.616-1.611-10.96-10.96h27.625v-2.286h-27.625l10.965-10.965-1.616-1.607z">
                </path>
              </svg>
            </a>

            <h3>创建/编辑房间</h3>

          </div>

        </div>

        <div class="layout__body">

        {# 填写表单 start #}
          <form class="form" method="POST" action="">

            {% csrf_token %}

            {# 主题选项框 start#}
            <div class="form__group">
              <label for="room_topic">主题</label>
              <input required type="text" name="topic"  list="topic-list" value="{{ room_pk.topic }}"/>
              <datalist id="topic-list">
                  <select id="room_topic">

                      {% for topic in topics %}
                      <option value="{{ topic.name }}">{{ topic.name }}</option>
                      {% endfor %}

                  </select>
              </datalist>
            </div>
            {# 主题选项框 end #}


            <div class="form__group">
              <label for="room_name">名称</label>
                {{ form.name }}
            </div>

            <div class="form__group">
                <label for="room_about">描述</label>
                {{ form.desc }}
            </div>

            <div class="form__action">
              <a class="btn btn--dark" href="{% url 'home' %}">取消</a>
              <button class="btn btn--main" type="submit">提交</button>
            </div>

          </form>
          {# 填写表单 end #}

        </div>

      </div>
    </div>
</main>

{% endblock content %}
